<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	.border-lavener{
		border: 1px solid #e6e6fa;
	}	
	.musicContainer{
		max-width: none!important;
		width: 940px;
	}	
	.titleSection{
		position: relative;
		min-height: 30px;
		border: 1px solid #e6e6fa;
		padding-bottom: 5px;
		padding-top: 5px;
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 5px;
		margin-bottom: 5px;
		background-color: #f5f5f5;
	}
	
	.contentSection{
		height: 420px;	
	}

	.freeContainer:before, .freeContainer:after,
	.titleSection:before, .titleSection:after,
	.contentSection:before, .contentSection:after{
		content: " ";
		display: table;
	}
	:before, :after{
		box-sizing: border-box;
	}
	.freeContainer:after, .titleSection:after,
	.contentSection.after{
		clear: both;
	}
</style>
<link rel="stylesheet" type="text/css" href="css/board.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript">

//댓글 목록 불러오기
function getComment(jData, commentPageNo){
	$.ajax({
		type:"post", 
		url:"freeFindCommentListByBoardNo.ju",
		data:jData,
		success:function(data){
			$("#commentView").empty();
			$("#commentView").append("<table>"); 
				$.each(data.list,function(index,str){
					if(str.memberVO.id=='${sessionScope.mvo.id}'){
						 $("#commentView table").append(
								"<tr><td id='nickname' width='100px' align='left'><img src='${initParam.memberPhotoPath }"+str.memberVO.picturePath+"' width='24px' height='24px'>"
								+str.memberVO.nickname+"</td><td width='345px' align='left'><span><pre style='border: 0'>"
								+str.content+"</pre></span></td><td width='100px' align='center'>"
								+str.date+"</td><td><input type=hidden id='no' name='no' value="
								+str.no+"></td><td><input type=button id='modifyTextCommentBtn' value='수정'><input type=button id='deleteCommentBtn' value='삭제' ><input type=hidden name='nowPage' value="+commentPageNo+"></td></tr>");
					}else{
						$("#commentView table").append("<tr><td id='nickname' width='100px' align='left'><img src='${initParam.memberPhotoPath }"+str.memberVO.picturePath+"' width='24px' height='24px'>"+str.memberVO.nickname+"</td><td width='345px' align='center'><pre style='border: 0'>"+str.content+"</pre></td><td width='100px' align='center'>"+str.date+
						"</td><td></td></tr>"); 
					}//if					
				});//each						
				
	//댓글 페이지 번호 부분
				$("#commentPageView").empty();						
				var previousPageGroup=data.pagingBean.startPageOfPageGroup - data.pagingBean.numberOfPageGroup;
				var endPageOfPageGroup=data.pagingBean.endPageOfPageGroup+1;
				
				if(previousPageGroup > 0){
					$("#commentPageView").append("<a href=# class=nextPageNo id="+previousPageGroup+">◀</a>");
				}
			 for(var i=data.pagingBean.startPageOfPageGroup; i<= data.pagingBean.endPageOfPageGroup; i++){	
					$("#commentPageView").append("<a href=# class=pageNo id="+i+">"+i+"</a>");
				}							 
			 if(data.pagingBean.nextPageGroup==true){
					var endPageOfPageGroup=data.pagingBean.endPageOfPageGroup+1;
					$("#commentPageView").append("<a href=# class=nextPageNo id="+endPageOfPageGroup+">▶</a>");
				}
		}//success
});//ajax
}//getCommentMain

//댓글 수정 버튼 눌렀을 시 동작
	function getCommentNoBtn(jData,checkNo){
		 $.ajax({
				type:"post", 
				url:"freeFindCommentListByBoardNo.ju",
				data:jData,
				success:function(data){
					$("#commentView").empty();
					$("#commentView").append("<table>"); 
						$.each(data.list,function(index,str){
							if(str.no==checkNo){
								$("#commentView table").append(
										"<tr><td id='nickname' width='100px'  align='left'>"
										+str.memberVO.nickname+"</td><td width='345px' align='left'><span><pre style='border: 0'><input type=text value="
										+str.content+"><input type=button id='modifyCommentBtn' value='수정하기'></pre></span></td><td width='100px' align='center'>"
										+str.date+"</td><td><input type=hidden id='no' name='no' value="
										+str.no+"></td><td><input type=button id='modifyCommentCancelBtn' value='취소'></td></tr>");
							}else{
								$("#commentView table").append(
										"<tr><td id='nickname' width='100px'  align='left'>"
										+str.memberVO.nickname+"</td><td width='345px' align='left'><span><pre style='border: 0'>"
										+str.content+"</pre></span></td><td width='100px' align='center'>"
										+str.date+"</td><td><input type=hidden id='no' name='no' value="
										+str.no+"></td><td></td></tr>");
							}					 
						
						});//each						
						
						//댓글 페이지 번호 부분
						$("#commentPageView").empty();						
						var previousPageGroup=data.pagingBean.startPageOfPageGroup - data.pagingBean.numberOfPageGroup;
						var endPageOfPageGroup=data.pagingBean.endPageOfPageGroup+1;
						
						if(previousPageGroup > 0){
							$("#commentPageView").append("<a href=# class=nextPageNo id="+previousPageGroup+">◀</a>");
						}
					 for(var i=data.pagingBean.startPageOfPageGroup; i<= data.pagingBean.endPageOfPageGroup; i++){	
							$("#commentPageView").append("<a href=# class=pageNo id="+i+">"+i+"</a>");
						}							 
					 if(data.pagingBean.nextPageGroup==true){
							var endPageOfPageGroup=data.pagingBean.endPageOfPageGroup+1;
							$("#commentPageView").append("<a href=# class=nextPageNo id="+endPageOfPageGroup+">▶</a>");
						}
				}//success
		});//ajax
}//getCommentNoBtn

	$(document).ready(function(){

		//댓글 첫페이지 목록 불러오기
		getComment("no="+$("#no").val()+"&nowPage="+1,1);
		
		//댓글 페이지 그룹 넘어가기
		 $("#commentPageView").on("click",".nextPageNo",function(){
			 var commentPageNo = $(this).prop("id");
			getComment("no="+$("#no").val()+"&nowPage="+commentPageNo,commentPageNo);		 
		 });
		
		//댓글 페이지 번호에 해당하는 목록 불러오기
		 $("#commentPageView").on("click",".pageNo",function(){
			 var commentPageNo = $(this).prop("id");
				getComment("no="+$("#no").val()+"&nowPage="+commentPageNo,commentPageNo);
		 });
		
		//댓글 수정하는 텍스트 창 생성(getCommentNoBtn_ajax)
		 $("#commentView").on("click","#modifyTextCommentBtn",function(){		 	 
		 	var commentPageNo=$(this).parent().parent().children("td:eq(4)").children(":hidden[name=nowPage]").val();
		 	 var checkNo=$(this).parent().parent().children("td:eq(3)").children(":hidden[name=no]").val();
		 	  getCommentNoBtn("no="+$("#no").val()+"&nowPage="+commentPageNo,checkNo); 			
		 });	 

		//댓글 수정(수정하기버튼)
 		 $("#commentView").on("click","#modifyCommentBtn",function(){
			 $.ajax({
					type:"post",
					url:"freeUpdateComment.ju",
					data:"no="+$(this).parent().parent().parent().parent().children("td:eq(3)").children().val()+"&content="+$(this).parent().parent().children().children().eq(0).val(),
					success:function(){
						location.href="freeFindContentByNo.ju?no="+$("#no").val();
					},
					error:function(){
						alert("error");
					}
			 });//ajax			
		});
					
		//댓글 삭제
			$("#commentView").on("click","#deleteCommentBtn",function(){
				$.ajax({
						type:"post",
						url:"freeDeleteComment.ju",
						data:"no="+$(this).parent().parent().children().children(":hidden[name=no]").val(),
						success:function(){
							location.href="freeFindContentByNo.ju?no="+$("#no").val();
						}
				 });//ajax 
			});	
		
		//댓글 수정 취소
			 $("#commentView").on("click","#modifyCommentCancelBtn",function(){
				location.href="freeFindContentByNo.ju?no="+$("#no").val();
			});
	
		//게시글 삭제하기
		$("#deleteBtn").click(function(){
				if(confirm("삭제하시겠습니까?")){
					location.href="freeDeleteContent.ju?no="+$("#no").val();
					}
		});
		//게시글 수정하기
		$("#modifyBtn").click(function(){		
			if(confirm("수정하시겠습니까?")){
				location.href="freeModify.ju?no="+$("#no").val();
				}
			});		
		
		//목록으로 가기
		$("#listBtn").click(function(){
			location.href=${initParam.root }+"getContentListPerPage.ju?nowPage="+1;
		});	
		
		//댓글 입력시 공란 체크
		$("#reBtn").click(function(){
			if($("#content").val()==""){
				alert("댓글 입력!");
				return false;
			}
		});		
		
	});
</script>
</head>
<body>
	<form method="post" name="detailForm" action="${initParam.root }freeWriteComment.ju">
		<input type="hidden" id="no" name="no" value="${requestScope.bvo.no }">
		<input type="hidden" id="boardNo" name="boardNo" value="${requestScope.bvo.no}">
		<input type="hidden" id="memberVO.id" name="memberVO.id" value="${sessionScope.mvo.id }">	
		
	<div class="titleSection">
		<strong><b>${requestScope.bvo.title }</b></strong>
		<span style="float: right;">${requestScope.bvo.date }</span>
	</div>	
	
	<div class="titleSection">
		<img src="${initParam.memberPhotoPath }${requestScope.bvo.memberVO.picturePath }" width="24px" height="24px">
		${requestScope.bvo.memberVO.nickname }
		<span style="float: right;">조회수 ${requestScope.bvo.hit }</span>
	</div>

	<div class="titleSection">
		내용
	</div>
	
	<div class="titleSection">
		<pre style="border: 0">${requestScope.bvo.content }</pre>
	</div>

<div align="center">
					<c:choose>
					<c:when test="${sessionScope.mvo.id == requestScope.bvo.memberVO.id}">
					<!-- <input type="button" id="listBtn" value="목록" >
					<input type="button" id="modifyBtn" value="수정">
					<input type="button" id="deleteBtn" value="삭제" > -->
					<img src="${initParam.root }img/listBtn.png" height="25px" id="listBtn">
					<img src="${initParam.root }img/ModifyBtn.png" height="25px" id="modifyBtn">
					<img src="${initParam.root }img/deleteBtn.png" height="25px" id="deleteBtn">
					</c:when>
					<c:when test="${sessionScope.mvo.grade == 'admin'}">
					<!-- <input type="button" id="listBtn" value="목록" >
					<input type="button" id="deleteBtn" value="삭제" >  -->
					<img src="${initParam.root }img/ModifyBtn.png" height="25px" id="modifyBtn">
					<img src="${initParam.root }img/deleteBtn.png" height="25px" id="deleteBtn">
					<br>
					</c:when>
					<c:otherwise>
					<!-- <input type="button" id="listBtn" value="목록" > -->
					<img src="${initParam.root }img/listBtn.png" height="25px" id="listBtn">
					</c:otherwise>
					</c:choose>	
</div>
			<div id="commentView"></div>	
			
			<c:if test="${sessionScope.mvo != null}">	
			<table>
			<tr>
	<td></td>
	<td><div id="commentPageView" align="center"></div></td>
	<td></td>
	</tr>
			<tr>
	   <td width="100px"  align="left">${sessionScope.mvo.nickname }</td>
		<td width="345px" align="center"><textarea cols="40" rows="2" id="content" name="content" style="resize:none"></textarea></td>
		<td width="100px" align="right">
		<!-- <input type="submit" id="reBtn" value="댓글등록"> -->
		<input type="image" id="reBtn" src="${initParam.root }img/commentsBtn.png" height="25px">
		</td>
	</tr>
	
	</table>
	</c:if>

	</form>

</body>
</html>